
var 防抖2 =  {
  template: /*html*/`
  <div>
    <div>防抖2-自定义ref方法</div>
    <input :value="text" @input="change">
    <p>{{text}}</p> 
  </div> 
    `,
  setup(){
    //防抖, 利用自定义ref方法 -- customRef
    let timer = null
    const debounceRef = (value) => {
      return customRef((track, trigger) => {
        return {
          get(){
            track() //vue给的依赖收集, 调用了自动收集依赖,实现响应式
            return value
          },
          set(val){
            clearTimeout(timer)
            timer = setTimeout(() => {
              value = val
              trigger() //vue的派发更新, 调用了自动向收集的依赖派发更新, 实现响应式
            },1000)
          }
        }
      })
    }
    const text = debounceRef('')
    const change = (e) => {
      text.value = e.target.value
    }

    return {
      text,change
    }
  },
}
